import React, { memo, useEffect } from 'react'
import { useSelector, shallowEqual, useDispatch } from 'react-redux'

import WYThemeHeaderSmall from '@/components/theme-header-small'

import { getSizeImage } from "@/utils/format-utils"

import { getInSinger } from '../../store/actionCreators'

import { SingerWrapper } from './style'

export default memo(function InSinger() {
  const { artists } = useSelector(state => {
    return {
      artists: state.getIn(["recommend", "artists"])
    }
  }, shallowEqual)

  // console.log(artists)

  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getInSinger({limit: 5}))
  }, [dispatch])

  return (
    <SingerWrapper>
      <WYThemeHeaderSmall title="入驻歌手" more="查看全部 >"></WYThemeHeaderSmall>
      <div className="singer-wrapper">
        {
          artists.map(item => {
            return (
              <a href="/singer" className="item" key={item.id}>
                <img src={getSizeImage(item.img1v1Url, 62)} alt="404"></img>
                <div className="info">
                  <div className="info-name">{item.name}</div>
                  <div className="info-desc text-nowrap">{item.alias[0]}</div>
                </div>
              </a>
            )
          })
        }
      </div>
      <div className="singer-btn">申请成为网易音乐人</div>
    </SingerWrapper>
  )
})

